<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>RunJS</title>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/481/btglu7jb/vue.js"></script>
    <script type="text/javascript" src="http://h5.lrbnews.com/H5/ddh20160925/SLeasy3/lib/GSAP/TweenMax.min.js"></script>
    <script type="text/javascript" src="http://h5.lrbnews.com/H5/ddh20160925/SLeasy3/lib/GSAP/club.js"></script>
    <style>
        body{background:#fefefe;}
        .edit_area{
            width:400px;
            height:100px;
            border:1px solid #ccc;
            color:#222;

        }

    </style>
</head>
<body>
<div id="container">
    <h2 style="color:red">
        Data[text]:<span id='data'>{{text}}</span>
        <br>
        Data2[text2]:<span id='data2'>{{text2}}</span>
    </h2>
    <editor-text1 :textval="text"></editor-text1>
    <editor-text2 :textval="text2"></editor-text2>
</div>
<script type="text/x-template" id="editor-with-text1">
    <div>
        <h1>input01</h1>
        <div class="edit_area" contenteditable="true" v-editdiv="textval"></div>
    </div>

</script>
<script type="text/x-template" id="editor-with-text2">
    <div>
        <h1>input02</h1>
        <div class="edit_area" contenteditable="true" v-editdiv="textval"></div>
    </div>

</script>
<script>
    +function(){
        Vue.directive('editdiv', {
            bind: function(el, binding, vnode) {
                el.innerText = binding.value;
                binding.hander = function() {
                    console.log(vm);
                    console.log(el.innerText);
                    vm.text=el.innerText;
                };
                el.addEventListener("keyup", binding.hander);
            },
            update: function(el, binding, vnode) {
                console.log("update...");
                el.innerText = binding.value;
                TweenMax.to('#data',1,{scrambleText:binding.value});
            },
            unbind: function(el, binding, vnode) {
                console.log("unbind...");
                el.removeEventListener("keyup", binding.hander);
            }
        })
//注册组件
        Vue.component("editor-text1", {
            template: "#editor-with-text1",
            props: ['textval'],
        });
        Vue.component("editor-text2", {
            template: "#editor-with-text2",
            props: ['textval'],

        });
//开启根节点
        var vm=new Vue({
            el: '#container',
            data:{
                text:'12345',
                text2:'45657'
            }
        });



    }()
</script>
</body>
</html>